<template>
    <div class="father">
        <h3>父组件</h3>
        <h4>银子：{{ money }}万元</h4>
        <h4>车子：一辆{{ car.brand }}车，价值{{ car.price }}万元</h4>
        <Child />
    </div>
</template>

<script setup lang="ts" name="Father">
import Child from './Child.vue'
import { ref, reactive, provide } from 'vue'
/*
1. 概述：实现**祖孙组件**直接通信

2. 具体使用：

   * 在祖先组件中通过`provide`配置向后代组件提供数据
   * 在后代组件中通过`inject`配置来声明接收数据
*/
let money = ref(100)
let car = reactive({
    brand: '奔驰',
    price: 100
})
function updateMoney(value: number) {
    money.value -= value
}

// 向后代提供数据
// 注意：子组件中不用编写任何东西，是不受到任何打扰的
provide('moneyContext', { money, updateMoney })
provide('car', car)
</script>

<style scoped>
.father {
    background-color: rgb(165, 164, 164);
    padding: 20px;
    border-radius: 10px;
}
</style>
